<template>
    <el-dialog
      :visible.sync="dialogVisible"
      width="22vw"
      :close-on-click-modal="false"
      :show-close="false"
      :before-close="dialogBeforeClose"
      append-to-body
      class="dialog"
    >
      <div class="registerTitle">
        <div class="registerLogin">
            <div class="registerWel">欢迎注册</div>
            <div  class="registerHas">已有账号？<span @click="dialogBeforeClose()">登录</span></div>
        </div>
        <i class="el-icon-close" @click="dialogBeforeClose()"></i>
      </div>
      <el-form
        :model="form"
        :rules="rules"
        ref="form"
        :label-position="'left'"
        label-width="4vw"
        class="demo-ruleForm"
      >
        <el-form-item label="手机号" prop="phone">
          <template #label>手&nbsp;&nbsp;机&nbsp;&nbsp;号</template>
          <el-input v-model="form.phone" placeholder="请输入手机号"></el-input>
        </el-form-item>
        <div class="errorText"><img src="@/assets/img/vectorClose.png" alt="" v-show="showPhone" />{{phoneText}}</div>
        <el-form-item label="密码" prop="password">
            <template #label>密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码</template>
            <el-input :type="showEye ? 'password' : 'text'" v-model="form.password" placeholder="请输入密码">
              <i slot="suffix" class="el-input__icon el-icon-open" v-if="!showEye" @click="showEye = !showEye"></i>
              <i slot="suffix" class="el-input__icon el-icon-turn-off" v-else @click="showEye = !showEye"></i>
            </el-input>
        </el-form-item>
        <div class="errorText"><img src="@/assets/img/vectorClose.png" alt="" v-show="showPassWord"/>{{passwordText}}</div>
        <el-form-item label="确认密码" prop="passwordCheck">
            <template #label>确认密码</template>
            <el-input :type="showEyes ? 'password' : 'text'" v-model="form.passwordCheck" placeholder="请再次确认密码">
              <i slot="suffix" class="el-input__icon el-icon-open" v-if="!showEyes" @click="showEyes = !showEyes"></i>
              <i slot="suffix" class="el-input__icon el-icon-turn-off" v-else @click="showEyes = !showEyes"></i>
            </el-input>
        </el-form-item>
        <div class="errorText"><img src="@/assets/img/vectorClose.png" alt="" v-show="showCheck"/>{{checkText}}</div>
        <div class="loginCheckbox"><el-checkbox v-model="checked"></el-checkbox>同意并遵守<span @click="toProtocol(1)">《服务条款》</span>和<span @click="toProtocol(2)">《隐私条款》</span></div>
        <div class="errorText errorMargin"><img src="@/assets/img/vectorClose.png" alt="" v-show="showProtocol" />{{protocolText}}</div>
      </el-form>
      <el-button type="primary" @click="submitForm">注册并登录</el-button>
    </el-dialog>
  </template>

<script>
import { addUserApi } from '@/api/user'
export default {
  name: 'register',
  components: {
  },

  data () {
    return {
      dialogVisible: false,
      form: {
        name: '',
        password: '',
        phone: '',
        userName: '',
        passwordCheck: ''
      },
      rules: {
      },
      checked: false,
      phoneText: '',
      showPhone: false,
      passwordText: '',
      showPassWord: false,
      showCheck: false,
      checkText: '',
      showProtocol: false,
      protocolText: '',
      showEye: true,
      showEyes: true
    }
  },
  computed: {
  },
  created () {
    this.baseId = this.$store.getters.userInfo.baseId
  },

  methods: {
    // 注册打开
    getData () {
      this.dialogVisible = true
    },
    // 协议
    toProtocol (type) {
      this.$parent.toProtocol(type)
    },
    // 关闭
    dialogBeforeClose () {
      this.dialogVisible = false
      this.showPhone = false
      this.showPassWord = false
      this.showCheck = false
      this.phoneText = ''
      this.passwordText = ''
      this.checkText = ''
      this.protocolText = ''
    },
    // 提交表单
    submitForm () {
      // 手动重置
      this.showPhone = false
      this.showPassWord = false
      this.showCheck = false
      this.showProtocol = false
      this.phoneText = ''
      this.passwordText = ''
      this.checkText = ''
      this.protocolText = ''
      if (!this.form.phone) {
        this.phoneText = '请输入手机号码'
        this.showPhone = true
      }
      if (!this.form.password) {
        this.passwordText = '请输入密码'
        this.showPassWord = true
      }
      if (!this.form.passwordCheck) {
        this.checkText = '请输入确认密码'
        this.showCheck = true
        return
      }
      if (this.form.phone && !(/^\d{11}$/.test(this.form.phone))) {
        this.phoneText = '请输入正确的手机号'
        this.showPhone = true
      }
      if (this.form.password && !(/^[a-zA-Z0-9]{6,12}$/.test(this.form.password))) {
        this.passwordText = '请输入6-12位数字、英文组合'
        this.showPassWord = true
      }
      if (this.form.password !== this.form.passwordCheck) {
        this.checkText = '两次输入的新密码不一致'
        this.showCheck = true
      }
      if (!this.showPhone && !this.showPassWord && !this.showCheck) {
        if (!this.checked) {
          // this.$message.error('请勾选同意并遵守《服务条款》和《隐私条款》')
          this.showProtocol = true
          this.protocolText = '您尚未勾选《用户协议》及《隐私政策》，是否勾选并注册？'
          return
        }
        this.form.userName = this.form.phone
        this.form.name = '种田#' + this.form.phone.slice(-4)
        addUserApi(this.form).then(res => {
          if (res.code === 200) {
            this.$store.dispatch('user/loginAction', this.form).then(baseData => {
              localStorage.setItem('boxCheck', this.checked ? 1 : 0)
              if (baseData.baseId) {
                this.$router.push('/shuzhongtian')
              } else {
                this.$router.push('/shuzhongtian/baseInfoCheck')
              }
            })
          }
          if (res.code === 223) {
            this.phoneText = '该手机号已被注册，请返回登录页点击「忘记密码」'
            this.showPhone = true
          }
        })
      }
    }
  }
}
</script>
<style  scoped lang="scss">
::v-deep .el-dialog {
    border-radius: 0.2rem !important;
    margin-top: 15vh !important;
    background: rgba(242, 240, 242, 0.85);
    .el-dialog__title {
      display: none;
    }
    .el-dialog__header {
      display: none;
    }
}
::v-deep .registerTitle {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin: 2vh 0 2.5vh 0;
    span {
        color: #00C586;
    }
    .registerWel {
        color: #000;
        font-size: 1.5vw;
        font-weight: bold;
    }
    .registerHas {
        color: #999999;
        margin-top: 0.5vh
    }
    .el-icon-close {
        font-size: 1.3vw
    }
}
.loginCheckbox {
    // margin: 3vh 0 0 0;
    font-size: 0.7vw;
    ::v-deep .el-checkbox {
      margin-right: 0.3vw;
    }
    span {
      color: #00C586
    }
}
.errorText {
    margin-left: 4vw;
    color: #F76560;
    font-size: 0.7vw;
    display: flex;
    align-items: center;
    height: 4vh;
    img {
      width: 0.8vw;
      height: 0.8vw;
      margin-right: 0.5vw
    }
}
.errorMargin {
  margin-left: 0
}
::v-deep .el-button {
    width: 100%;
    height: 3.125vw * 0.834;
    border-radius: 4px;
    background:#00C586;
}
::v-deep .el-form-item {
    margin-bottom: 0;
}
</style>
